<template>
  <div id="mainportal" class="container" style="overflow: hidden;background-color: #fff;">

  <comhead title="会员登录" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
   
  <div style='padding:30px 0;text-align:center;'>
      <img :src='$store.getters.getMerchant.merchantIcon' style='width:100px;height:100px;border-radius: 5px;'/>

  </div>
  
  <div class='session1' >
    <div style=''>
      账号:
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;border-bottom: solid 1px #e5e5e5;'>
      <input maxlength="11" placeholder="输入手机号" v-model="loginName"/>
    </div>
  </div>

 
  <div class='session1'>
    <div  style=''>
      密码:
    </div>
    <div style='flex:1;padding:10px 0 10px  10px;  border-bottom: solid 1px #e5e5e5;'>
      <input maxlength="10" type='password' placeholder="输入密码"  v-model="password"/>
    </div>
  </div>
 
  <div class='item-sign1' style=' color: #1973bf;'>
  <div class='itemsBix' >
    <div @click='goSign' class=' signBox'>会员注册</div>
    <div style='height:20px;border-right: solid 1px #e5e5e5;margin:0 10px'>

    </div>
    <div @click='goForget' class='signBox' >忘记密码?</div>
    </div>
  </div>
  <div>
      <!-- {{loginName.length>0&&password.length>0?'background-color:'+themeColors:'background-color:#ccc' }}; -->
    <button class='login bg'  style="" @click='doLogin' v-if="li_module">
         <span>登录</span> 
    </button>
    <button class='login'  style="" @click='doLogin' v-else>
         <span>登录</span> 
    </button>


  </div>
  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../common/coffee/Comhead";

export default {
  data() {
    return {
    	li_module:false,
      loginName: "",
      password: ""
    };
  },
  computed: {},

  methods: {
    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    },
    goForget(){
      this.$router.push('/forget')
    },
    doLogin() {
      if (this.loginName.length!==11) {
        MessageBox.alert("手机号格式错误");
        return;
      }

      let self = this;
      let url = this.$baseUrl.bizUrl + "/auth/user/login";
      let data = {
        loginName: this.loginName,
        password: this.password,
        merchantId: this.$store.getters.getMerchant.merchantId
      };

      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }
        if (res.status != 200) {
          console.log("请求数据错误");
          return;
        }
        if (res.status === 200) {
          if(res.data.status === 200){
    this.$store.commit("setLoginStatus", {
            userId: res.data.data.userId,
            token: res.data.data.token
          });
          let storage = window.localStorage;
          storage.setItem(
            "LoginStatus",
            JSON.stringify({
              userId: res.data.data.userId,
              token: res.data.data.token,
              nickName: res.data.data.nickName,
              iconUrl: res.data.data.iconUrl,
              role: res.data.data.role
            })
          );

          this.$router.replace({
            name: "indexpage",
            query: {
              validcode: storage.appId,
              type: storage.interPage
            }
          });

          }else{
                    MessageBox.alert(res.data.message);

          }
      


        }
      };
      this.$reqFormPost(url, data, callBack);
    }
  },
  mounted() {
  	if(this.$store.getters.getMerchant.merchantId == 'Mer5af261c3db573c5063f0fdf4') {
				this.li_module = true
			}
  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>
::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  font-size: 14px;
  text-align: left;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-size: 14px;
  text-align: left;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-size: 14px;
  text-align: left;
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-size: 14px;
  text-align: left;
}

.session1 {
  display: flex;
  align-items: center;
  font-size: 16px;
  background-color: #fff;
  padding: 10px 25px;
}
.signBox {
  padding: 5px 0;
}
.itemsBix {
  display: flex;
  align-items: center;
}
.item-sign1 {
  padding: 5px 0;
  display: flex;
  justify-content: flex-end;
  padding-right: 25px;
  font-size: 14px;
}
.login {
  margin: 10px auto;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  padding: 5px 0;
  width: 80%;
  background-color: #1973bf;
}
.login:active {
  opacity: 0.5;
}
.bg{
	background-color:#36A740
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
